<template>
  <div class="share-con">
    <div class="blur-con">
      <img class="blur-img" :src="bgArr[bgActive]" />
      <div class="blur-main"></div>
    </div>
    <div class="share-card">
      <div ref="outputCon" class="outputCon">
        <img class="card-bg" :src="bgArr[bgActive]" />
        <div class="card-main">
          <!-- <div class="share-user">
            <img class="user-face" :src="userInfo.headImg"/>
            <div class="user-info">
              <p>{{ userInfo.nickName }}</p>
              <p>分享给你个好东西</p>
            </div>
          </div> -->
          <div class="share-project">
            <!-- <img :src="detail.coverImg"/> -->
            <h3>{{detail.title}}</h3>
          </div>
          <div class="share-qrcode">
            <p>凝聚每个努力的人的力量</p>
            <p>长按二维码了解</p>
            <!-- <img src="http://temp.im/100x100" alt=""> -->
            <qrcode-vue class="share-qrcode-img" :value="shareUrl + '?id='+ id" size="150" level="H"></qrcode-vue>
          </div>
        </div>
      </div>
      <div class="output">
        <img v-if="imgSrc" :src="imgSrc" alt="">
      </div>
    </div>
    <div class="tool">
      <div v-for="(item, index) in bgArr" :key="index" :class="{active: index === bgActive}" class="tool-item" @click="bgActive = index">
        <img :src="item" class="tool-item-main" />
        <img src="@/assets/img/ok.png" class="tool-item-icon">
      </div>
    </div>
  </div>
</template>

<script>
  import Html2Canvas from 'html2canvas';
  import QrcodeVue from 'qrcode.vue'
  import { getInfo, getBrokerage } from '@/api/project'

  import bg1 from '@/assets/img/shareTemp/bg1.jpg'
  import bg2 from '@/assets/img/shareTemp/bg2.jpg'
  import bg3 from '@/assets/img/shareTemp/bg3.jpg'
  import bg4 from '@/assets/img/shareTemp/bg4.jpg'

  export default {
    components: {
      QrcodeVue,
    },
    data() {
      return {
        bgArr: [bg1, bg2, bg3, bg4 ],
        bgActive: 0,
        userInfo: {},
        id: this.$route.query.id,
        detail: {},
        shareDetail: {},
        imgSrc: '',
        shareUrl: process.env.BASE_APP + '/details'
      }
    },
    watch: {
      bgActive(val) {
        setTimeout(() => {
          this.buildImg() // 生成图片的方法
        }, 300)

      }
    },
    created() {
      this.userInfo = this.$store.state.userInfo.nickName && this.$store.state.userInfo || JSON.parse(localStorage.getItem('userInfo'))
    },
    created() {
      this.getDetail()
    },
    mounted() {

    },
    methods: {
      getDetail() {
        getInfo(this.id).then(res => {
          this.detail = res.project
          getBrokerage(this.id).then(res => {
            this.buildImg() // 生成图片的方法
            this.shareDetail = res.dara
          })
        })

      },
      buildImg() {
        const el = this.$refs.outputCon
        const options = {
          // allowTaint: true
          backgroundColor: null,
          useCORS: true,
        }
        Html2Canvas(el, options).then(canvas => {
          this.imgSrc = canvas.toDataURL()
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.share-con{
  position: relative;
}
.blur-con{
  position: absolute;
  z-index: 1;
  width: 100vw;
  height: 100vh;
}
.blur-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-filter:blur(10px);
  filter:blur(10px);
}
.blur-main{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: hsla(0, 0%, 100%, 0.25) border-box;
}
.share-card{
  width: 3rem;
  height: 5rem;
  border-radius: 4px;
  overflow: hidden;
  position: absolute;
  top: .6rem;
  left: 50%;
  margin-left: -1.5rem;
  z-index: 2;
}
.outputCon{
  width: 100%;
  height: 100%;
  position: relative;
  img{
    width: 100%;
    height: 100%;
  }
  .card-main{
    position: absolute;
    z-index: 2;
    bottom: 0;
    width: 100%;
    padding: 0 .2rem .2rem;
    box-sizing: border-box;
  }
}
.output{
  // display: none;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  img{
    width: 100%;
  }
}
.share-user{
  .user-face{
    float: left;
    width: .5rem;
    border-radius: 50%;
  }
  .user-info{
    padding-left: .65rem;
    color: #fff;
    p{
      font-size: .14rem;
      &:first-child{
        font-size: .16rem;
      }
    }
  }
}
.share-project{
  max-height: .7rem;
  padding: .1rem;
  background: #fff;
  border-radius: 4px;
  margin: .14rem 0;
  overflow: hidden;
  // img{
  //   width: .82rem;
  //   height: .5rem;
  //   float: left;
  // }
  h3{
    // padding-left: .12rem;
    font-size: .16rem;
    color: #333;
    font-weight: bold;
    line-height: .24rem;
    max-height: .48rem;
    overflow: hidden;
  }
}
.share-qrcode{
  background: #fff;
  border-radius: 4px;
  padding: .1rem;
  position: relative;
  p{
    color: #999;
    font-size: .13rem;
    line-height: 2;
    &:first-child{
      font-size: .14rem;
      line-height: 2;
      color: #333;
    }
  }
  .share-qrcode-img{
    // position: absolute;
    // right: .1rem;
    // top: .1rem;
    // width: .5rem;
    // height: .5rem;
    display: block;
    width: 1.5rem;
    margin: .2rem auto .1rem;
  }
}
.tool{
  width: 100vw;
  // height: .6rem;
  position: fixed;
  z-index: 9;
  bottom: 0;
  left: 0;
  padding: .2rem;
  box-sizing: border-box;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0;
  .tool-item{
    display: inline-block;
    width: .6rem;
    height: .6rem;
    position: relative;
    &.active{
      .tool-item-icon{
        display: block;
      }
    }
    &:not(:first-child){
      margin-left: .2rem;
    }
    .tool-item-main{
      width: 100%;
      height: 100%;
      // object-fit: cover;
    }
    .tool-item-icon{
      position: absolute;
      display: none;
      width: .2rem;
      top: 0;
      right: 0;
      background: #fff;
    }
  }
}
</style>